import React, { Component } from 'react'
import {changeManager} from './actionCreators'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import Head from './Head'

import './manager.css'
class Modifyman extends Component {
    constructor(props){
        // let data = props.location
        super();
        this.state={
            inpno:props.managers.Mno,
            inpname:props.managers.Mname,
            inppsdnow:props.managers.Pwd,
            inppsd1:'',
            inppsd:'',
            

        }    
    } 
    nameChange=(e)=>{
        let value = e.target.value
        this.setState({inpname:value})
    }  
    psdChange=(e)=>{
        let value = e.target.value
        this.setState({inppsd1:value})
    }
    newChange=(e)=>{
        let value = e.target.value
        this.setState({inppsd:value})
    }
    showTip=()=>{
        if(this.state.inppsd1==this.state.inppsdnow){
            return true
        }
        else{
            return false
        }
    }
    render() {
        let data = {
            Mno:this.state.inpno,
            Mname:this.state.inpname,
            Pwd:this.state.inppsd,
        }
        return (
            <div>
                <Head />
                <div className='info'>
                    <div className='item'>
                        <span>账号：</span>
                        <input 
                            style={{marginLeft:'53px'}}
                            type="text" 
                            value={this.state.inpno}
                            disabled
                        />
                    </div>
                    <div className='item'>
                        <span>姓名：</span>
                        <input 
                            style={{marginLeft:'53px'}}
                            type="text" 
                            value={this.state.inpname}
                            onChange={this.nameChange}
                        />
                    </div>
                    <div className='item'>
                        <span>当前密码：</span>
                        <input 
                            id='now'
                            style={{marginLeft:'26px'}}
                            type="password" 
                            value={this.state.inppsd1}
                            onChange={this.psdChange}
                        />
                    </div>
                    <div style={{display:this.showTip()?'none':'block',marginLeft:'100px',marginBottom:'10px',marginTop:'-10px',color:'red'}}>当前密码不正确</div>
                    <div className='item'>
                        <span>新密码：</span>
                        <input 
                            style={{marginLeft:'40px'}}
                            type="password" 
                            value={this.state.inppsd}
                            onChange={this.newChange}

                        />
                    </div>
                    <div className='item'>
                        <span>用户类别：</span>
                        <input 
                            style={{marginLeft:'24px'}}
                            type="text" 
                            value="管理员"
                            disabled
                        />
                    </div>
                    <button className='btn' 
                        onClick={(e)=>{
                            this.props.history.push('/manager')
                        }}
                    >
                        取消
                    </button>
                    <button className='btn' 
                        onClick={(e)=>{
                            this.props.dispatch(changeManager(data))
                            setTimeout(()=>{
                                this.props.history.push('/')
                            },500)
                        }}
                    >
                        保存修改
                    </button>
                </div>
            </div>
        )
    }
}

const mapStateToProps=(state)=>({
    // manager:state.modifyman.managers,
    managers:JSON.parse(state.login.managers),

}); 

export default  connect(mapStateToProps)(Modifyman);

// export default Modifyman
